<template>
    <!---  展开列表 --->
    <div class="sidebar scroll-main" v-bind:style='sidebarwidth'>
        <div v-if="sidebarshow" class="shoow-all">
            <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router >
                <el-menu-item  index="ganttDemo">监控中心</el-menu-item>
                <el-submenu index="1" >
                    <template slot="title">设备监控状态</template>
                    <el-menu-item index="ganttDemo">设备监控状态明细</el-menu-item>
                </el-submenu>
            </el-menu>
        </div>
    </div>
</template>

<script>
    const axios = require( 'axios');
    const Datasource = require( 'vue-datasource');
    const loginModel = require( '../../api/model');        //  接口js引用
    export default {
        props:  ["sidebarwidth","sidebarshow","sidebarhide"], // 组件传值
        data: function(){
            const self = this;
            return {
                sidebarwidth:{}
            }
        },
        methods: {
        },
        computed:{
            onRoutes(){
                return this.$route.path.replace('/','');
            }
        },
        //默认加载
        beforeMount(){
            if(loginModel.heads == "这里是初始值"){
                this.$router.push('/');
            };
            this.screenHeight = `${document.documentElement.clientHeight}`;
            this.sidebarwidth = {'width':'183px','height':this.screenHeight-78+'px'}
        }
    }
</script>
<style>
    @import "../../../static/css/main.css";
    /*@import "../../../static/css/color-dark.css";*/     /*深色主题*/
    /* @import "../../../static/css/theme-green/color-green.css";*/  /* !*浅绿色主题*!*/
    @import "../../../static/css/theme-green2/color-green.css";  /* !*浅绿色主题*!*/

</style>
<style>
    .sidebar{
        display: block;
        position: absolute;
        left: 0;
        width:250px;
        top: 70px;
        bottom:0;
        background: rgb(238, 246, 246);
        border-right: rgb(219, 219, 219) 1px solid;
        transition: width .3s;
    }
    .sidebar ul {height:100%;}
    .show-icon, .show-all{ transition: width .6s;}
    .show-icon { margin-top:15px;}
    .show-icon i{ font-size:28px}
    .show-icon .parents{
        border-bottom: #e2e9e8 1px solid;
        height: 76px;
        line-height: 76px;
        font-size: 14px;
        color: rgb(72, 106, 106);
        padding: 0 20px;
        cursor: pointer;
        position: relative;
        transition: border-color .3s,background-color .3s,color .3s;
        box-sizing: border-box;
        white-space: nowrap;
        transition: width .8s;
    }
    .show-icon .child{
        position: absolute;
        left: 57px;
        /*width: 101px;*/
        z-index: 999;
        top: 34px;
        list-style: none;
    }
    .show-icon .child li{
        padding:0px 10px;
        height:36px;
        line-height:36px;
        background-color: rgb(211, 245, 247);
        border-bottom: #e2e9e8 1px solid;
        font-size:14px;
    }
    .show-icon .child li i{ font-size:14px;}

</style>
